

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import * as Reflux from 'reflux';




    var SELECT = React.createClass({
        //mixins: [Reflux.connect(SelectStore,'dataResult')],
        propTypes: {
            name: React.PropTypes.string.isRequired,
        },
        getDefaultProps: function () {
            return {
                value: null,
                keyName: "",
                isAuto: true,
                isRefresh:false,//是否强制刷新
                showName: "name",
                Data: [{"id":"1","name":"版本1"},{"id":"2","name":"版本2"}],
                searchParam:"",
                defaultShowName:"",
                isClick:false,
                isClear:false
            };
        },
        //state isRefresh 是否已经强制刷新
        getInitialState: function () {
            return {value: '', listShow: false, dataResult: false,item: "", isLoad: false,stateNum:0,isSelfClick:false}
        },
        componentWillMount: function () {
            var temp = ajax.init();
            if(this.props.defaultShowName&&this.props.defaultShowName!=""&&this.props.defaultValue!=""){
                 this.setState({
                    value: this.props.defaultShowName
                })
                //  this.props.setFormValue({"name": this.props.name, "value": item});
              this.props.setFormValue({"name": this.props.name, "value": this.props.defaultValue});
              this.props.handleBlur({"name": this.props.name, "value": this.props.defaultValue});
            }else{
                this.setState({
                    value: this.props.placeholder
                })
            }
        },
        onStatusChange: function (result) {
            //console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&" + JSON.stringify(result))



            var items = result, item = {}, selectItem = false, state = {};
            for (var i = 0; i < items.length; i++) {
                item = items[i];
                if (item[this.props.valuekey] != undefined && item[this.props.valuekey] == this.props.defaultValue) {
                    selectItem = item;
                }
            }
            if (!selectItem) {
                selectItem = "";
                // selectItem = {};
                // selectItem[this.props.valuekey] = "";
                //selectItem[this.props.showName] = this.props.placeholder==undefined?"":this.props.placeholder;
            }
            //console.log(this.props.defaultValue + " select say :" + JSON.stringify(selectItem));

            if(this.props.defaultValue!=""){
              this.getValue(selectItem);
              this.props.handleBlur(this.state.item);
              //this.props.isAuto||state
              //&&state.
              
             
            }        
            if(this.props.isAuto){
                this.setState({"dataResult": result, "isLoad": true,isClick:(this.props.isClick==undefined?false:this.props.isClick)});
            }else{
                this.setState({"listShow":true,"dataResult": result, "isLoad": true,isClick:(this.props.isClick==undefined?false:this.props.isClick)});
            }    
            

            //this.props.isAuto || this.handleClick();

        },
        componentDidMount: function () {
                  //console.info("selesect    sya stateNum "+this.state.stateNum)
        },
        componentWillUnmount: function () {
            this.unsubscribe();
        },
        componentWillUpdate:function(nextProps,nextState){
            //nextState.isSelfClick
            if(!nextState.isSelfClick&&nextProps.reFreshNum&&nextState.stateNum<nextProps.reFreshNum&&this.state.isLoad){
                console.info("selesect  say  强制刷新 "+this.state.stateNum)
                this.setState({"stateNum":Number(this.state.stateNum)+1,"isClick":false,"isLoad":false,"value":"",item:""});
                this.props.handleBlur("",this);
               // this.props.isRefresh&&this.SelectActions.get(this.props.url, this.props.searchParam);
            }
            
              
            
           

            //this.props.isRefresh&&this.SelectActions.get(this.props.url, this.props.searchParam);
         /*   if(this.props.isRefresh){
                //console.info("selesect  say  强制刷新 ")
            }

             //console.info("selesect  say  加载一次 "+this.props.name)*/
        },
        handleChange: function (event) {
            //this.setState({value: event.target.value.substr(0, 140)});
            //console.log("fuck")
        },
        handleClick: function (e) {
            if (!this.props.isAuto && !this.state.isLoad) {
                this.onStatusChange(this.props.Data);
                //this.SelectActions.get(this.props.url, this.props.searchParam);
            } else {
                this.setState({listShow: !this.state.listShow, isClick: true})
            }

            console.log("fuck             --------------------------------------------------")
        },
        getValue: function (item) {
            //console.log("点击值:" + JSON.stringify(item));
            this.setState({value: item.name, listShow: false, isClick: false, "item": item,isSelfClick:true});
            if (this.props.valuekey) {
                this.props.setFormValue({"name": this.props.name, "value": item[this.props.valuekey]});
            } else {
                this.props.setFormValue({"name": this.props.name, "value": item});
            }
        },
        handleBlur: function () {
            if (this.state.isClick) {               
                this.setState({listShow: false, isClick: false})
                this.props.handleBlur(this.state.item,this);
            }
             //console.log("鼠标移出 select"+this.state.value);
        },
        render: function () {
            var value = this.state.value, $Li = [], item, selectItem,temp;
            var result = this.state.dataResult.result;
            //this.props.keyName==""
            //this.props.keyName==""?result.result:(result.result[this.props.keyName])
            var items = this.state.dataResult.result ?(this.props.keyName==""?result:(result[this.props.keyName])): false;
            return (
                <div className="virtual-select" onClick={this.handleClick} onMouseLeave={this.handleBlur}>
                    <input type="text" className="input input-normal" value={value} onChange={this.handleChange}/>
                    <label className="icon icon-select">&nbsp;&nbsp;</label>
                    <div className={this.state.listShow?"container-form-select":"hide"}>
                        <div className="temp">
                            <Lis isClear={this.props.isClear} onGetValue={this.getValue} items={items} defaultShow="没有查询到数据" defaultValue={this.props.defaultValue}></Lis>
                        </div>
                    </div>
                </div>
            )
        }
    });


    var Li = React.createClass({
        handleClick: function (item) {
            //console.log(JSON.stringify(item))
            this.props.onGetValue(item);
        },
        render: function () {
            var item = this.props.item;
            return (
                <li key={i} onClick={this.handleClick.bind(this,item)}>{item.name}</li>
            );
        }
    })
    //defaultValue
    var Lis = React.createClass({
        componentWillMount: function () {

            //if(this.props.defaultValue)
        },
        handleClick: function (item,e) {
            //console.log(JSON.stringify(item))
            this.props.onGetValue(item);

        },
        render: function () {
            /*console.log("select tble say isClear:"+this.props.isClear)*/
            if (!this.props.items) {
                return (
                    <ul>
                        <li>{this.props.defaultShow || "无"}</li>
                    </ul>
                )
            }
            return (
                <ul>
                    {(() => {
                        if(this.props.isClear){
                            return (
                                <li onClick={this.handleClick.bind(this,"")}>清空</li>
                            )
                        }
                    })()}
                    {
                        this.props.items.map(function (item, i) {
                            return (
                                <li key={i} onClick={this.handleClick.bind(this,item)}>{item.name}</li>
                            );
                        }, this)

                    }                   
                </ul>

            )
        }

    })
    module.exports =  {
        SELECT: SELECT,
        Lis: Lis
    }

